import React, { useState } from 'react';
import { Card, Form, Input, Button, Switch, message,notification } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { motion, AnimatePresence } from 'framer-motion';
import { useUserStore } from '@/store';
import { useNavigate } from 'react-router-dom';
import './assets/index.css'
export default React.FC = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const { registerAction, loginAction } = useUserStore((state) => state);

  const loginHandle = (values:{userName:string,password:string}) => {
    loginAction(values).then((res) => {
      notification.success({
        message: '登录成功',
        description: `欢迎用户${res.userName}~`,
        duration: 2
      })
      navigate('/')
    }).catch((err) => {
      notification.error({
        message: '登录失败',
        description: err
      })
    })
  }
  const handleOk = () => {
    form.validateFields().then((values) => {
      if (isLogin) {
        loginHandle(values)
      } else {
        registerAction(values).then((res) => {
          loginHandle(values)
        })
      }
      form.resetFields();
    });
  };
  return (
    <div className="c_container">
       <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ type: "spring", stiffness: 280, damping: 20 }}
        >
        <Card 
          className="c_card"
          title={
            <div className="c_header">
              <AnimatePresence mode="wait">
                <motion.div
                  key={isLogin ? "login" : "register"}
                  initial={{ opacity: 0, x: isLogin ? -100 : 100 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: isLogin ? 100 : -100 }}
                  transition={{ type: "spring", stiffness: 280, damping: 25 }}
                  className="c_title"
                >
                  { isLogin ? '登录' : '注册'} CG-AI
                </motion.div>
              </AnimatePresence>
              <div className="c_switch">
                <Switch
                  checked={isLogin}
                  onChange={setIsLogin}
                  checkedChildren="登录"
                  unCheckedChildren="注册"
                />
              </div>
            </div>
          }
        >
          <Form
            form={form}
            autoComplete="off"
            onFinish={handleOk}
          >
            <Form.Item
              name="userName"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input 
                prefix={<UserOutlined />} 
                placeholder="用户名" 
                id="userName"
                size="large"
                className="c_input"
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="密码"
                size="large"
                className="c_input"
                id="password"
              />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block size="large" className="c_button">
                {isLogin ? '登录' : '注册'}
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </motion.div>
    </div>
  );
};

  